<template>
  <div class="storeAdd">
    <!-- 头部标题 -->
    <div class="storeAdd-header">
      <div class="storeAdd-header-tt">编辑门店</div>
    </div>
 
    <!-- 编辑门店 -->
    <div class="store-region">
      <form class="form">
        <div class="input-row">
          <label class="input-label">名称:&nbsp;&nbsp;&nbsp;&nbsp;</label>
          <input id="storeName" type="text" class="input" :placeholder= "oldStore.storeName" v-model="storeName">
        </div>
        <div class="input-row flexCen">
          <label class="input-label">地址:&nbsp;&nbsp;&nbsp;&nbsp;</label>
          <textarea id="storeLocation" class="input loc" :placeholder="oldStore.storeLocation" v-model="storeLocation"></textarea>
        </div>
        <div class="input-row">
          <label class="input-label">联系人:&nbsp;</label>
          <input id="storeUser" type="text" class="input" :placeholder="oldStore.storeUser" v-model="storeUser">
        </div>
        <div class="input-row">
          <label class="input-label">联系电话:</label>
          <input id="storePhone" type="text" class="input" :placeholder="oldStore.storePhone" v-model="storePhone">
        </div>
        <div class="input-row">
          <label class="input-label">登录手机号:</label>
          <input id="userPhone" type="text" class="input" :placeholder="oldStore.userPhone" v-model="userPhone">
        </div>
      </form>

      <div class="btn-wrapper">
        <button class="btn" id="defBtn" @click="storeEidt">确认</button>
        <button class="btn" id="remBtn" @click="goStore">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'StoreEidt',
  data(){
    return {
      oldStore: {},
      storeName: '',
      storeLocation: '',
      storeUser: '',
      storePhone: '',
      userPhone: '',
    }
  },
  mounted() {
    this.oldStore = JSON.parse(sessionStorage.getItem("STOREDETAIL"));
  },
  methods: {
    goStore() {
      this.$router.push('/home/store');
    },
    //修改门店信息，派发active
    async storeEidt(){
      try{
        let res = '';
        let {storeId,storeName,storeLocation,storeUser,storePhone,userPhone} = this;
        let info = (storeName && storeLocation && storeUser && storePhone && userPhone);
        if(info) {
          res = await this.$store.dispatch('getStoreEdit',{storeId: this.oldStore.storeId,storeName,storeLocation,storeUser,storePhone,userPhone});
        }
        if(res) {
          //登录成功：路由跳转
          alert('添加成功！');
          this.$router.push('/home/store');  
        }else {
          alert('请输入门店信息！');
        }
      }catch(error){
        alert(error.message);
      }
    }  
  }
}
</script>

<style scoped>
  .flexCen {
    display: flex;
    align-items: center;
  }

  .storeAdd {
    box-sizing: border-box;
    width: 100%;
    height: 99%;
    padding-top: 1.6vh;
    padding-left: 3vw;
    padding-right: 3vw;
    background-color: #fff;
    border-radius: 4vw;
  }

  .storeAdd .storeAdd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4vh;
  }

  .storeAdd .storeAdd-header-tt {
    font-size: 4.5vw;
    font-weight: 700;
  }

  .store-region {
    box-sizing: border-box;
    width: 100%;
  }

  .store-region .input {
    border: .4vw solid #ccc;
    border-radius: 1vw;
    width: 60vw;
    height: 4vh;
    margin: 2vw;
    padding-left: 1vw;
  }

  .store-region .loc {
    height: 10vh;
    font-size: 4vw;
    padding-top: .8vh;
  }

  .store-region .btn-wrapper {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding: 0 15vw;
    margin-top: 3vh;
  }

  .store-region .btn {
    display: block;
    width: 24vw;
    height: 5vh;
    font-size: 4vw;
  }

  .store-region #defBtn {
    color: #fff;
    background-color: #118EE9;
    border: 0.4vw solid #118EE9;
    border-radius: 0.8vh;
  }

  .store-region #remBtn {
    color: #000;
    background-color: #fff;
    border: 0.4vw solid #ccc;
    border-radius: 0.8vh;
  }
</style>